<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

	<f:metadata>
		<f:viewParam name="module" value="#{menuMB.modulo.idmodulo}" />
		<f:event type="preRenderView" listener="#{menuMB.updateMenu()}" />
	</f:metadata>

	<!-- Definiendo la cabecera de la pagina -->
	<ui:define name="title">
		<h:outputText value="Boveda" />
	</ui:define>

	<!-- Definiendo el cuerpo de la pagina -->
	<ui:define name="content">

		<script type="text/javascript">
		    $(document).ready(function () {
			    $("#modal-dialog-bg").hide();
			    $("#dlgCalculadora").hide();
		    	$("#dlbBuscarCuentabancaria").hide();
			 	$("#dlgCalculadora").draggable();
			 	$("#dlbBuscarCuentabancaria").draggable();
			 	
		    	$("#formTransaccion\\:btnBuscarCuentabancaria").click(function(){
		    		$("#modal-dialog-bg").show();
		    		$("#dlbBuscarCuentabancaria").show();  		
		        });
		    	$("#formTransaccion\\:btnCalculadora").click(function(){
		    		$("#modal-dialog-bg").show();
		    		$("#dlgCalculadora").show();  		
		        });		        
		    });

		    function closeDlgCalculadora(){
		    	$("#modal-dialog-bg").hide();
	    		$("#dlgCalculadora").hide();  
			}
		    function closeDlgBuscarCuentabancaria(){
		    	$("#modal-dialog-bg").hide();
	    		$("#dlbBuscarCuentabancaria").hide();  
			}
		</script>

		<h:outputStylesheet library="css" name="main.css" />

		<h:form id="formTransaccion">
			<br />
			<div style="margin-left: 50px;">
				<div>
					<div>
						<div class="p6n-api-app-section-box editable"
							style="margin-right: 380px;">
							<div class="p6n-api-app-section-title">
								<div class="p6n-api-app-section-collapse-icon"></div>
								<div class="p6n-api-app-section-title-text">
									<h:outputLabel
										value="#{transaccionCuentabancariaCajaBean.caja.denominacion}" />
									<label>(<h:outputLabel
											value="#{transaccionCuentabancariaCajaBean.caja.abreviatura}" />)
									</label>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<label>Estado:&nbsp;<h:outputLabel
											value="#{transaccionCuentabancariaCajaBean.estadoaperturaCaja.denominacion}" />&nbsp;|&nbsp;<h:outputLabel
											value="#{transaccionCuentabancariaCajaBean.estadomovimientoCaja.denominacion}" />
									</label>
								</div>
								<div class="p6n-api-app-section-description">Todas las
									operaciones son de responsabilidad del usuario en session</div>
							</div>
						</div>
						<h:panelGroup id="divCuentabancariaValid">
							<h:panelGroup
								rendered="#{!transaccionCuentabancariaCajaBean.isCuentabancariaValid()}">
								<div class="p6n-butterbar" id="p6n-manualbutterbar0"
									style="left: 414.5px;">
									<div>
										<h:messages id="msgBuscarCuentabancaria" />
									</div>
								</div>
							</h:panelGroup>
						</h:panelGroup>
						<h:panelGroup
							rendered="#{!transaccionCuentabancariaCajaBean.isValidBean()}">
							<div class="p6n-api-access-in-page-error" style="left: 416px;">
								<div>
									<div>
										<p>
											<h:messages />
										</p>
									</div>
									<div style="text-align: center;">
										<h:commandLink value="Volver"
											action="/modules/caja/administracion/administrarCaja.xhtm?faces-redirect=true"
											immediate="true"
											styleClass="p6n-api-access-in-page-error-link" />
									</div>
								</div>
							</div>
							<div class="modal-dialog-bg"
								style="opacity: 0.4; width: 1366px; height: 802px;"></div>
						</h:panelGroup>

						<br /> <br />
						<div class="p6n-api-consent-screen-title">Transaccion Caja</div>
						<div class="p6n-api-consent-screen-inputs">
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label" style="width: 150px;">TIPO
									TRANSACCION</div>
								<div>
									<h:selectOneMenu id="cmbTipoTransaccion"
										value="#{transaccionCuentabancariaCajaBean.comboTipotransaccion.itemSelected}"
										valueChangeListener="#{transaccionCuentabancariaCajaBean.changeTipotransaccion}"
										required="true"
										requiredMessage="Seleccione un tipo de transaccion">
										<f:selectItem itemLabel="--Seleccione--" itemValue="" />
										<f:selectItems
											value="#{transaccionCuentabancariaCajaBean.comboTipotransaccion.items.entrySet()}"
											var="val" itemLabel="#{val.value.denominacion}"
											itemValue="#{val.key}" />
										<f:ajax execute="@this" />
									</h:selectOneMenu>
								</div>
							</div>
							<div
								class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
								<h:message for="cmbTipoTransaccion" />
							</div>
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label">NUMERO CUENTA</div>
								<div>
									<div style="float: left;">
										<h:inputText id="txtNumerocuenta"
											value="#{transaccionCuentabancariaCajaBean.numeroCuenta}"
											required="true" requiredMessage="Ingrese un numero de cuenta"
											validatorMessage="Numero de cuenta no valida" maxlength="14"
											onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
											<f:validateRegex pattern="(^[0-9]{14}$)" />
											<f:ajax
												listener="#{transaccionCuentabancariaCajaBean.findCuentabancariaByNumerocuenta()}"
												execute="@this"
												render="divCuentabancariaValid cuentabancariaResultadobusqueda" />
										</h:inputText>
									</div>
									<div style="float: left;">
										<h:outputLink id="btnBuscarCuentabancaria" value="#"
											styleClass="button" style="margin: 0 0 0 1px;">
											<span class="icon icon198"></span>
										</h:outputLink>
									</div>
								</div>
							</div>
							<div
								class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg"
								style="float: inherit;">
								<h:message for="txtNumerocuenta" />
							</div>
							<br /> <br />
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label" style="width: 150px;">TIPO
									MONEDA</div>
								<div>
									<h:selectOneMenu id="cmbTipomoneda"
										value="#{transaccionCuentabancariaCajaBean.comboTipomoneda.itemSelected}"
										valueChangeListener="#{transaccionCuentabancariaCajaBean.changeTipomoneda}"
										required="true" requiredMessage="Seleccione una moneda">
										<f:selectItem itemLabel="--Seleccione--" itemValue="" />
										<f:selectItems
											value="#{transaccionCuentabancariaCajaBean.comboTipomoneda.items.entrySet()}"
											var="val" itemLabel="#{val.value.denominacion}"
											itemValue="#{val.key}" />
										<f:ajax render="txtMonto :formCalculadora" />
									</h:selectOneMenu>
								</div>
							</div>
							<div
								class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
								<h:message for="cmbTipomoneda" />
							</div>
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label" style="width: 150px;">MONTO</div>
								<div style="float: left;">
									<h:inputText id="txtMonto"
										value="#{transaccionCuentabancariaCajaBean.monto}"
										required="true" maxlenght="16">
										<f:converter converterId="MonedaConverter"></f:converter>
										<f:ajax event="blur" render="@this" />
									</h:inputText>
								</div>
								<div style="float: left;">
									<h:outputLink id="btnCalculadora" value="#" styleClass="button"
										style="margin: 0 0 0 1px;">
										<span class="icon icon32"></span>
									</h:outputLink>
								</div>
							</div>
							<br /> <br />
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label">REFERENCIA</div>
								<div>
									<h:inputText
										value="#{transaccionCuentabancariaCajaBean.referencia}"
										size="30" maxlenght="200" />
								</div>
							</div>
							<div class="sf-separator"></div>

							<div class="sf-buttons" style="float: left;">
								<h:commandButton
									action="#{transaccionCuentabancariaCajaBean.createTransaccioncaja()}"
									value="Guardar" styleClass="action blue" />
							</div>
						</div>


						<h:panelGroup id="cuentabancariaResultadobusqueda">
							<div class="p6n-api-consent-screen-preview-image">
								<div class="p6n-api-consent-screen-preview-image-bg">

									<div class="p6n-api-consent-screen-inputs">
										<div class="p6n-api-consent-screen-input-section">
											<div class="p6n-api-consent-screen-label"
												style="width: 150px; text-align: left; margin-left: 20px; font-size: 14px;">NRO
												CUENTA</div>
											<div
												style="text-align: left; margin-left: 20px; font-size: 16px;">
												<h:outputLabel
													value="#{transaccionCuentabancariaCajaBean.cuentabancariaView.numerocuenta}" />
											</div>
										</div>
										<div class="p6n-api-consent-screen-input-section">
											<div class="p6n-api-consent-screen-label"
												style="width: 150px; text-align: left; margin-left: 20px; font-size: 14px;">TIPO
												CUENTA</div>
											<div
												style="text-align: left; margin-left: 20px; font-size: 16px;">
												<h:outputLabel
													value="#{transaccionCuentabancariaCajaBean.cuentabancariaView.denominacionTipocuentabancaria}" />
											</div>
										</div>
										<div class="p6n-api-consent-screen-input-section">
											<div class="p6n-api-consent-screen-label"
												style="width: 150px; text-align: left; margin-left: 20px; font-size: 14px;">MONEDA</div>
											<div
												style="text-align: left; margin-left: 20px; font-size: 16px;">
												<h:outputLabel
													value="#{transaccionCuentabancariaCajaBean.cuentabancariaView.denominacionTipomoneda}" />
											</div>
										</div>

										<div class="p6n-api-consent-screen-input-section">
											<div class="p6n-api-consent-screen-label"
												style="width: 150px; text-align: left; margin-left: 20px; font-size: 14px;">TITULAR</div>
											<div
												style="text-align: left; margin-left: 20px; font-size: 16px;">
												<h:outputLabel
													value="#{transaccionCuentabancariaCajaBean.cuentabancariaView.titular}" />
											</div>
										</div>
									</div>
								</div>
							</div>
						</h:panelGroup>
					</div>
				</div>
			</div>
		</h:form>

		<div id="dlbBuscarCuentabancaria" class="modal-dialog p6n-popup"
			style="left: 412.5px; top: 10x;">
			<h:form>
				<div class="modal-dialog-content">
					<div id="p6n-cloudsql-content">
						<div>
							<div>
								<div>
									<div>
										<h:inputText
											value="#{transaccionCuentabancariaCajaBean.valorBusqueda}"
											style="width: 250px;float: left;" />
										&nbsp;
										<h:commandLink styleClass="button"
											style="margin: 0px;float: left;">
											<span class="icon icon198"></span>
											<span class="label"></span>
											<f:ajax execute="@form"
												listener="#{transaccionCuentabancariaCajaBean.searchCuentabancaria()}"
												render="tblResultadoBusqueda" />
										</h:commandLink>
										<h:selectOneMenu id="cmbTipoBusqueda"
											value="#{transaccionCuentabancariaCajaBean.comboTipobusqueda.itemSelected}"
											valueChangeListener="#{transaccionCuentabancariaCajaBean.changeTipobusqueda}"
											required="true"
											requiredMessage="Seleccione un Tipo de Busueda">
											<f:selectItem itemLabel="--Seleccione--" itemValue="" />
											<f:selectItems
												value="#{transaccionCuentabancariaCajaBean.comboTipobusqueda.items.entrySet()}"
												var="val" itemLabel="#{val.value}" itemValue="#{val.key}" />
											<f:ajax execute="@this" />
										</h:selectOneMenu>
									</div>
									<div
										class="p6n-cloudsql-name-message p6n-cloudsql-input-message">
										<h:messages />
									</div>
								</div>
							</div>
						</div>
						<hr />
						<div class="p6n-cloudsql-form">
							<div
								class="p6n-cloudsql-form-control p6n-cloudsql-form-control-name">
								<div class="p6n-cloudsql-name-input ">
									<div class="p6n-input-prepend">
										<p:dataTable id="tblResultadoBusqueda" var="cuenta"
											value="#{transaccionCuentabancariaCajaBean.tablaCuentabancaria.rows}"
											selectionMode="single"
											selection="#{transaccionCuentabancariaCajaBean.tablaCuentabancaria.selectedRow}"
											rowKey="#{cuenta}" rowIndexVar="row">

											<p:ajax event="rowSelect"
												listener="#{transaccionCuentabancariaCajaBean.setRowSelect()}" />

											<p:column headerText="Nro" style="text-align:center;">
												<h:outputText value="#{row + 1}" />
											</p:column>
											<p:column headerText="Nro Cuenta">
												<h:outputText value="#{cuenta.numerocuenta}" />
											</p:column>
											<p:column headerText="Tipo Cta">
												<h:outputText
													value="#{cuenta.denominacionTipocuentabancaria}" />
											</p:column>
											<p:column headerText="Moneda">
												<h:outputText value="#{cuenta.denominacionTipomoneda}" />
											</p:column>
											<p:column headerText="Titular">
												<h:outputText value="#{cuenta.titular}" />
											</p:column>
										</p:dataTable>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-dialog-buttons">
					<h:commandButton value="Aceptar" styleClass="action blue">
						<f:ajax
							listener="#{transaccionCuentabancariaCajaBean.setRowSelectToTransaccion()}"
							render=":formTransaccion:txtNumerocuenta :formTransaccion:cuentabancariaResultadobusqueda"
							onevent="closeDlgBuscarCuentabancaria" />
					</h:commandButton>
					<input type="button" value="Cancelar" class="action"
						onclick="closeDlgBuscarCuentabancaria()" />
				</div>
			</h:form>
		</div>

		<div id="dlgCalculadora" class="modal-dialog p6n-popup"
			style="left: 412.5px; top: 5px;">
			<h:form id="formCalculadora">
				<div class="modal-dialog-content">
					<div>
						<div>
							<table>
								<thead>
									<tr>
										<td style="text-align: right;">
											<div class="p6n-api-consent-screen-label"
												style="width: 100px;">DENOMINACION</div>
										</td>
										<td style="width: 20px;"></td>
										<td><div class="p6n-api-consent-screen-label"
												style="width: 150px;">CANTIDAD</div></td>
										<td style="width: 20px;"></td>
										<td><div class="p6n-api-consent-screen-label"
												style="width: 110px;">TOTAL</div></td>
									</tr>
								</thead>
								<tbody>
									<ui:repeat
										value="#{transaccionCuentabancariaCajaBean.calculadoraBean.list}"
										var="detalle">
										<tr>
											<td style="text-align: right; vertical-align: middle;"><h:outputLabel
													value="#{detalle.denominacionmoneda.denominacion}" /></td>
											<td></td>
											<td style="padding: 0px;"><h:inputText
													value="#{detalle.cantidad}" required="true" maxlength="6"
													styleClass="jfk-textinput p6n-api-consent-screen-homepage-url label-input-label"
													style="width:150px;">
													<f:ajax event="blur"
														render="txtSubtotal :formCalculadora:panelTotalTransaccion" />
												</h:inputText></td>
											<td></td>
											<td><h:outputLabel id="txtSubtotal"
													value="#{detalle.getSubtotal()}"
													style="width: 110px; vertical-align: middle;" /></td>
										</tr>
									</ui:repeat>
								</tbody>
							</table>
						</div>
						<h:panelGroup id="panelTotalTransaccion">
							<div style="margin-left: 250px;">
								<label>TOTAL:</label>
								<h:outputLabel id="txtTotal"
									value="#{transaccionCuentabancariaCajaBean.calculadoraBean.getTotal()}">
								</h:outputLabel>
							</div>
						</h:panelGroup>
					</div>
				</div>
				<div class="modal-dialog-buttons">
					<h:commandButton value="Guardar" styleClass="action blue">
						<f:ajax execute="@form"
							listener="#{transaccionCuentabancariaCajaBean.setMontoFromCalculadora()}"
							render="formCalculadora :formTransaccion:txtMonto"
							onevent="closeDlgCalculadora">
						</f:ajax>
					</h:commandButton>
					<input type="button" value="Cancelar" class="action"
						onclick="closeDlgCalculadora()" />
				</div>
			</h:form>
		</div>
		<div id="modal-dialog-bg" class="modal-dialog-bg"
			style="opacity: 0.4; width: 1366px; height: 802px;"></div>

	</ui:define>
</ui:composition>
</html>